<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
    <link href="/apps/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/apps/css/mui.css" rel="stylesheet">
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
</head>
<body>
    <div class="container-fluid">
        <h2 class="mt-4">{{title}}</h2>
        <p class="text-muted">{{description}}</p>

        <!-- 查询表单 -->
        <form method="GET" action="/apps/admin/refunds/stats" class="mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>开始日期</label>
                                <input type="text" class="form-control datepicker" name="begin" value="{{begin}}" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>结束日期</label>
                                <input type="text" class="form-control datepicker" name="end" value="{{end}}" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>统计维度</label>
                                <select class="form-control" name="group_by">
                                    <option value="date" {{#if (eq group_by "date")}}selected{{/if}}>按日期</option>
                                    <option value="channel" {{#if (eq group_by "channel")}}selected{{/if}}>按渠道</option>
                                    <option value="rep" {{#if (eq group_by "rep")}}selected{{/if}}>按代表</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <div class="form-group mb-0">
                                <button type="submit" class="btn btn-primary mr-2">
                                    <i class="fas fa-search"></i> 查询
                                </button>
                                <a href="{{downloadLink}}" class="btn btn-success">
                                    <i class="fas fa-download"></i> 导出Excel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- 统计表格 -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>{{#if (eq group_by "date")}}日期{{else}}{{#if (eq group_by "channel")}}渠道{{else}}代表{{/if}}{{/if}}</th>
                                <th class="text-center">退款笔数</th>
                                <th class="text-center">微信退款</th>
                                <th class="text-center">图贝退款</th>
                                <th class="text-right">退款金额</th>
                                <th class="text-right">微信金额</th>
                                <th class="text-right">图贝金额</th>
                                <th class="text-center">首笔时间</th>
                                <th class="text-center">末笔时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each stats}}
                            <tr>
                                <td>
                                    {{group_name}}
                                    {{#if group_desc}}<br><small class="text-muted">{{group_desc}}</small>{{/if}}
                                </td>
                                <td class="text-center">{{total_count}}</td>
                                <td class="text-center">{{weixin_count}}</td>
                                <td class="text-center">{{tupay_count}}</td>
                                <td class="text-right">¥{{total_amount}}</td>
                                <td class="text-right">¥{{weixin_amount}}</td>
                                <td class="text-right">¥{{tupay_amount}}</td>
                                <td class="text-center">{{first_refund_time}}</td>
                                <td class="text-center">{{last_refund_time}}</td>
                            </tr>
                            {{/each}}
                        </tbody>
                        <tfoot>
                            <tr class="font-weight-bold bg-light">
                                <td>总计</td>
                                <td class="text-center">{{totals.total_count}}</td>
                                <td class="text-center">{{totals.weixin_count}}</td>
                                <td class="text-center">{{totals.tupay_count}}</td>
                                <td class="text-right">¥{{totals.total_amount}}</td>
                                <td class="text-right">¥{{totals.weixin_amount}}</td>
                                <td class="text-right">¥{{totals.tupay_amount}}</td>
                                <td colspan="2"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入相关JS -->
    <script src="/apps/js/jquery.min.js"></script>
    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <script src="/apps/js/bootstrap-datepicker.min.js"></script>
    <script src="/apps/js/bootstrap-datepicker.zh-CN.min.js"></script>

    <script>
        $(function() {
            // 初始化日期选择器
            $('.datepicker').datepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                autoclose: true,
                todayHighlight: true
            });
        });
    </script>
</body>
</html> 